<template>
    <view class="globe_back">
        <view class="evaluate">
            <view>
                <view :class="tabIndex == item.id ? 'active' : 'tab'" @click="tabClick(item.id)" v-for="item in tab">{{ item.text }}</view>
            </view>
            <view class="evaluateList" v-for="(item,index) in list">
                <view class="flex">
                    <view>
                        <image class="userImg" :src="item.user_image" mode="widthFix"></image>
                    </view>
                    <view>
                        <text class="title">{{ item.user_name }}</text>
                        <text class="time">{{ item.createtime }}</text>
                        <u-rate :count="count" v-model="item.start" readonly active-color="#FF6401" inactiveColor="#F7F7F7" size="16"></u-rate>
                    </view>
                </view>
                <view class="evatext">{{ item.content }}</view>
                <view>
                    <image v-for="img in item.images" class="evaluateImg" :src="img" mode="widthFix"></image>
                </view>
                <!-- 回复 -->
                <view class="reply" v-if="item.store_content">
                    <text style="color: #3377ff">商家回复：</text>
                    <text>{{item.store_content}}</text>
                </view>
            </view>
        </view>
        <view style="height: 20px"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            count: 5,
            list: [],
            tabIndex: 0,
            tab: [
                { text: '全部', id: 0 },
                { text: '好评', id: 1 },
                { text: '中评', id: 2 },
                { text: '差评', id: 3 }
            ],
			id:0,
			page:1,
			pagesize:10,
        };
    },
    onLoad(e) {
       
		if(e.id){
			this.id=e.id
		}
		this.getList(1);
    },
	onReachBottom() {
	
	  if (this.page * this.pagesize > this.list.length) return;
	  this.status = "loading";
	  this.page = ++this.page;
	  setTimeout(() => {
	    this.getList(2);
	    if (this.page * this.pagesize > this.list.length)
	      this.status = "nomore";
	    else this.status = "loading";
	  }, 1000);
	},
    methods: {
		getList(e) {
			this.$.ajax(1,"POST","index/product_evaluation_reply",{
				id:this.id,
				page:this.page,
				pagesize:this.pagesize,
				tabindex:this.tabIndex+1
			},(res)=>{
			  if(res.code==200){
				  if(e==1){
				  	 this.list = res.data;
				  }else{
				  	 this.list = [...this.list, ...res.data];
				  }
				  // this.list=res.data;
			  }else{
			     this.$.ti_shi(res.msg);
			  }
			})
		},
        tabClick(e) {
            console.log(e);
            this.tabIndex = e;
			this.page=1,
			this.getList(1)
        }
    }
};
</script>

<style scoped lang="scss">
.tab {
    background: #f7f7f7;
    color: #666b75;
    font-size: 24rpx;
    padding: 8rpx 24rpx;
    border-radius: 50rpx;
    display: inline-block;
    margin: 24rpx;
}
.active {
    background: #3377ff;
    color: #ffffff;
    font-size: 24rpx;
    padding: 8rpx 24rpx;
    border-radius: 50rpx;
    display: inline-block;
    margin: 24rpx;
}
.evaluate {
    padding: 32rpx;
}
.evaluateList {
    background: white;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
}
.userImg {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
}
.title {
    margin: 0 8rpx;
    color: #00091a;
    font-size: 28rpx;
}
.time {
    color: #ccced1;
    font-size: 24rpx;
}
.evatext {
    font-size: 28rpx;
    color: #00091a;
    margin: 16rpx 0;
}
.evaluateImg {
    width: 196rpx;
    height: 196rpx;
    border-radius: 16rpx;
    margin: 9rpx;
}
.reply {
    padding: 24rpx;
    background: #f7f7f7;
    border-radius: 16rpx;
    font-size: 28rpx;
}
</style>
